<template>
  <el-dialog
    :width="width"
    :draggable="draggable"
    :fullScreen="fullScreen"
    top="0px"
    :modal="true"
    align-center
    :center="false"
    :class="globalClasses"
    :close-on-click-modal="false"
    :append-to-body="false"
    :append-to="getHeight ? undefined : '#hide-minus-dialogs'"
    :modelValue="dialogFormVisible"
    class="my-dialog-body"
    :body-class="bodyClass"
    ref="myDialogRef"
    :show-close="false"
    :style="{ height: getHeight }"
    @close="onClose"
    @opened="onOpened"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <div :id="titleId" :class="titleClass" class="dialog-title">
          <span style="margin-right: 10px">{{ $t(title) }}</span>
          <slot name="title-slot"></slot>
        </div>
        <div style="padding-right: 10px; cursor: pointer">
          <el-icon
            v-if="fullScreenBut"
            :size="20"
            style="padding-right: 10px"
            @click="onMinimize"
            ><FullScreen
          /></el-icon>
          <el-icon
            v-if="closeBut"
            :size="20"
            class="el-icon--left"
            @click="close"
            ><Close
          /></el-icon>
        </div>
      </div>
    </template>
    <div v-if="!!$slots.default" class="default-slot" ref="defaultSlotRef">
      <slot></slot>
    </div>
    <div v-if="!!$slots.footer" class="footer-slot">
      <slot name="footer"></slot>
    </div>
    <!-- 否则渲染默认的footer -->
    <div v-else-if="renderDefaultFooter" class="footer-slot">
      <el-button
        v-if="showCancel"
        v-bind="cancelButtonProps"
        type="default"
        @click="onClose"
      >
        {{ cancelText || $t("取消") }}
      </el-button>
      <el-button
        v-if="onOk"
        v-bind="okButtonProps"
        :type="okType || 'primary'"
        :loading="loading"
        @click="onOk"
      >
        {{ okText || $t("确认") }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed, ref, watch, defineEmits } from "vue";
import i18n from "@/lang";
const props = defineProps({
  draggable: {
    type: Boolean,
    default: true,
  },
  showAnimate: {
    type: String,
    default: "",
  },
  isMinusFull: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: i18n.global.t("新增"),
  },
  width: {
    type: String,
    default: "300px",
  },

  visible: {
    type: Boolean,
    default: false,
  },
  okButtonProps: {
    type: Object,
    default: () => ({}),
  },
  okText: {
    type: String,
    default: "",
  },
  okType: {
    type: String,
    default: "",
  },
  cancelButtonProps: {
    type: Object,
    default: () => ({}),
  },
  showCancel: {
    type: Boolean,
    default: true,
  },
  cancelText: {
    type: String,
    default: "",
  },
  onOk: {
    type: Function,
    default: () => {},
  },
  renderDefaultFooter: {
    type: Boolean,
    default: true,
  },
  isMinusFull: {
    type: Boolean,
    default: false,
  },
  fullScreenBut: {
    type: Boolean,
    default: true,
  },
  closeBut: {
    type: Boolean,
    default: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const fullScreen = ref(props.isMinusFull);
const emits = defineEmits(["on-close", "update:visible"]);
const myDialogRef = ref();
const $slots = defineSlots();
const hasFormContent = ref(false);

let dialogFormVisible = computed({
  get: () => {
    return props.visible;
  },
  set: (val) => {
    emits("update:visible", val);
  },
});

/** 是否渲染默认的footer slot */
const renderDefaultFooter = computed(() => props.renderDefaultFooter);
const renderFooterSlot = computed(
  () => !!$slots.footer || renderDefaultFooter.value
);

const globalClasses = computed(() => {
  return [
    "animate__animated",
    {
      ["animate__" + props.showAnimate]: props.showAnimate !== "",
      "is-fullscreen": fullScreen.value,
    },
    renderFooterSlot.value ? "has-footer-slot" : "no-footer-slot",
    hasFormContent.value ? "has-form-content" : "",
  ];
});

const getHeight = computed(() => {
  return "auto";
});

const onClose = () => {
  dialogFormVisible.value = false;
  emitCloseEvent("close");
};

/** 为空否则是点击右上角的关闭按钮关闭的 */
const emitCloseEvent = (type) => {
  emits("on-close", type);
};

const defaultSlotRef = ref();
const onOpened = () => {
  const cmyFormFooter = document.querySelector(".cmyForm-footer");
  const hasForm = defaultSlotRef.value.contains(cmyFormFooter);
  hasFormContent.value = !!hasForm;
};
const onMinimize = () => {
  fullScreen.value = !fullScreen.value;
  if (fullScreen.value) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "";
  }
};
</script>
<style lang="scss" >
.my-dialog-body {
  z-index: 1000 !important;
  display: flex;
  flex-direction: column;
  min-width: 480px;
  padding: 0;
  overflow: hidden;
  transition: all 0.3s ease 0s;
  &.el-dialog {
    position: relative;
    $footer-height: 64px;
    $content-padding: 24px;
    border-radius: 8px;
    .dialog-title {
      display: flex;
      align-items: center;
    }
    .el-dialog__header {
      position: relative;
      display: flex;
      align-items: center;
      height: 56px;
      min-height: 56px;
      padding-bottom: 0;
      border-bottom: 1px solid #ededed;
      margin: 0;
      padding: 0;

      .el-dialog__title {
        padding-left: $content-padding;
        font-size: 16px;
        font-weight: 500;
        color: #333;
      }

      .el-dialog__headerbtn {
        bottom: 0;
        width: auto;
        height: 100%;
        padding: 0 $content-padding;
      }
    }

    .el-dialog__body {
      box-sizing: border-box;
      height: 100%;
      overflow: auto;

      &::-webkit-scrollbar {
        width: 5px;
        background-color: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background: #ddd;
      }

      .cmyForm-footer,
      .footer-slot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 64px;
        padding: 0 24px;
        background: #fff;
      }

      .default-slot {
        & > div {
          padding: 0;
        }
      }
    }

    &.has-footer-slot {
      .el-dialog__body {
        padding-bottom: $footer-height + $content-padding;

        .top-row {
          overflow: visible;

          &::after {
            display: block;
            width: 100%;
            height: $footer-height;
            content: "";
          }
        }
      }
    }

    &.no-footer-slot {
      .el-dialog__body {
        padding-bottom: 14px;
      }
    }

    &.has-form-content {
      .deault-slot {
        padding-bottom: $footer-height;
      }

      .el-dialog__body {
        padding-bottom: $footer-height;
      }
    }

    &.is-fullscreen {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: calc(100% - 200px) !important;
      left: 200px !important;
      height: calc(100% - 95px) !important;
      top: 95px !important;
      max-width: 100vw !important;
      margin: 0 !important;
      border-radius: 0 !important;
      transform: translate(0px, 0px) !important;

      .el-dialog__body {
        max-height: calc(100vh - 56px) !important;
        height: calc(100vh - 56px) !important;
      }
    }
  }

  .right-small-icon {
    position: absolute;
    top: 20px;
    right: 42px;
    font-size: 16px;
    color: #909399;

    .el-icon {
      margin: 0 10px;
      cursor: pointer;
    }
  }
}

.my-header {
  display: flex;
  justify-content: space-between;
  flex: 1;
  align-items: center;
}
</style>
